<template>
  <el-drawer
    v-model="open"
    :title="title"
    :with-header="true"
    size="50%"
    class="holiday-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
    :destroy-on-close="true"
  >
    <div class="content">
      <el-form ref="dictRef" :model="form" label-width="auto">
        <el-form-item
          label="名称"
          prop="name"
          :rules="[
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入名称"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item
          label="日期范围"
          prop="range"
          :rules="[
            {
              required: true,
              message: '请选择日期范围',
              trigger: 'change',
            },
          ]"
        >
          <el-col :span="14">
            <el-date-picker
              v-model="form.range"
              type="daterange"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dataRangeChange"
              value-format="YYYY-MM-DD"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="启用状态" prop="state">
          <el-switch
            v-model="form.state"
            :active-value="0"
            :inactive-value="1"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="请输入内容"
            style="width: 500px"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="closeW">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">
        {{ loading ? "保存中..." : "保存" }}
      </el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import {
  saveHolidayAPI,
  updateHolidayAPI,
} from "@/api/institution/holidaySetting";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["refreshPage"]);
const loading = ref(false);
const open = ref(false);
const title = ref("");
const data = reactive({
  form: {
    range: [], // ["2024-10-10", "2026-12-09"]
    id: null,
    name: null,
    startDate: null,
    endDate: null,
    remark: null,
    state: 0,
  },
});
const { form } = toRefs(data);

function openW(tt, item) {
  title.value = tt;
  open.value = true;
  if (item) {
    form.value = item;
    form.value.range = [form.value.startDate, form.value.endDate];
  } else {
    form.value = {
      range: [], // ["2024-10-10", "2026-12-09"]
      id: null,
      name: null,
      startDate: null,
      endDate: null,
      remark: null,
      state: 0,
    };
  }
}

function closeW() {
  open.value = false;
}

function refreshParent() {
  emits("refreshPage");
}

function dataRangeChange(event) {
  form.value.range = event;
  form.value.startDate = event ? event[0] : null;
  form.value.endDate = event ? event[1] : null;
}

function submitForm() {
  proxy.$refs["dictRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        updateHolidayAPI(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess("编辑成功");
            refreshParent();
            closeW();
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        saveHolidayAPI(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            refreshParent();
            closeW();
          })
          .catch(() => {
            loading.value = false;
          });
      }
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  });
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
